<template>
  <div class="app-container">
    <!-- <hear></hear> -->
    <!-- <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image> -->
    <div class="backoff">
      <div>
        <!-- <el-button @click="shuaxin" type="info" icon="el-icon-refresh-right" class="anniu"></el-button> -->
        <el-button class="anniu" @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <el-tabs class="tac" tab-position="left">
      <el-tab-pane style="height: 100%" label="基础信息">
          <div class="tmlbas" v-if="html_base64_str" style="padding-top: 45px;padding-bottom: 10px;" v-html="html_base64_str"></div>
        <el-form v-else :model="formdata" label-width="170px" :disabled="true" class="fromsBox">
          <el-form-item label="项目编号 :">
            <el-input v-model="formdata.project_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目名称 :">
            <el-input v-model="formdata.project_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="采购方式 :">
            <el-input v-model="formdata.procurement_method" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="预算金额 :">
            <el-input v-model="formdata.money" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="包号 :">
            <el-input :value="formdata.package_number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="包名称 :">
            <el-input v-model="formdata.package_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="包预算 :">
            <el-input v-model="formdata.package_money" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目联系人 :">
            <el-input v-model="formdata.project_person" autocomplete="off"></el-input>
          </el-form-item>
             <el-form-item label="项目联系方式 :">
            <el-input v-model="formdata.project_mobile" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item label="项目联系方式 :">
            "state": 2, //保函状态，0：申请中，1：审核中，2：审核通过，3：审核不通过
            <el-input v-show="shenqingInfo.state == 0" value="申请中" autocomplete="off"></el-input>
            <el-input v-show="shenqingInfo.state == 1" value="审核中" autocomplete="off"></el-input>
            <el-input v-show="shenqingInfo.state == 2" value="审核通过" autocomplete="off"></el-input>
            <el-input v-show="shenqingInfo.state == 3" value="审核不通过" autocomplete="off"></el-input>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane style="height: 100%" label="采购需求">
        <el-card style="margin-top: 60px;" class="box-card">
       <div>
        {{formdata.purchaseDemand}}
       </div>
        </el-card>
       </el-tab-pane>
      <el-tab-pane style="height: 100%" label="申请人资格需求"> 
        
        <el-card style="margin-top: 60px;" class="box-card">
<div>
        {{formdata.qualification}}
       </div>
</el-card>  
      </el-tab-pane>
      <el-tab-pane style="height: 100%" label="时间地点">

        <el-form :model="formdata" label-width="170px" :disabled="true" class="fromsBox">
          <el-form-item label="开标时间 :">
            <el-input v-model="formdata.companyName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="开标地点 :">
            <el-input v-model="formdata.corporateInformation" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="截止时间 :">
            <el-input v-model="formdata.corporatePhone" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
      </el-tab-pane>
      <el-tab-pane style="height: 100%" label="采购人信息">
            <el-form :model="formdata" label-width="170px" :disabled="true" class="fromsBox">
          <el-form-item label="采购人名称 :">
            <el-input v-model="formdata.purchasePersonName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="采购人地址 :">
            <el-input v-model="formdata.purchasePersonAddr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="采购人联系人 :">
            <el-input v-model="formdata.purchasePersonContactName" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="采购人联系方式 :">
            <el-input v-model="formdata.purchasePersonContactMobile" autocomplete="off"></el-input>
          </el-form-item>
  <el-form-item label="采购代理机构名称 :">
            <el-input v-model="formdata.purchaseAgentName" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="采购代理机构地址 :">
            <el-input v-model="formdata.purchaseAgentAddr" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="采购代理机构联系人 :">
            <el-input v-model="formdata.purchaseAgentPerson" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="采购代理机构联系方式 :">
            <el-input v-model="formdata.purchaseAgentMobile" autocomplete="off"></el-input>
          </el-form-item>

        </el-form> </el-tab-pane>
      
    </el-tabs>
    <!-- <binad></binad> -->
  </div>
</template>
    
<script>
// import hear from ".././../components/hear.vue";
// import binad from ".././../components/dinad.vue";
const Base64 = require('js-base64').Base64
import { bhdetail } from "@/api/system/liucheng";
// import { snfiledown } from "@/api/xin.js";
export default {
  components: {
    // hear,
    // binad,
  },
  data() {
    return {
      formLabelAlign: {}, //申请公司信息
      chjg: {}, //出汗机构
      shenqingInfo: {}, //申请信息
      baohanFile: "", //保函文件
      shenqishenpiFilengInfo: "", //审批文件
      payList: "", //支付记录
      kdList: "", //快递记录
      applyno: "",
       html_base64_str:"",
      jinduInfo: {}, //进度信息
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      ]
    };
  },
  created() {
    //   this.get_weidaili();
    //   this.get_daili();
    let params = JSON.parse(this.$route.query.params)
    this.formdata=params
      if(params.htmlBase64Str!==null){
      this.html_base64_str= Base64.decode(params.htmlBase64Str);//解密
    // console.log("解密",this.html_base64_str)
    }
console.log(params)
  },
  methods: {
    yulan(e) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = e + ""
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
    },
    async xiazai(e) {
      let url = e; //  download(url)
      var bbc = {
        applyno: this.applyno,
        type: 0,
      };
      const { data } = await snfiledown(bbc);
      this.xiazpdf(data.data)

    },
    xiazpdf(e) {
      var that = this
      // res.data   就是后台返回的base64的 文件流
      let URL = this.dataURLtoBlob(e);
      var reader = new FileReader();
      reader.readAsDataURL(URL);
      reader.onload = function (e) {
        // 兼容IE
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(e.target.result.split(",")[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var blob = new Blob([u8arr]);

          window.navigator.msSaveOrOpenBlob(blob, that.wenname);
        } else {
          // 转换完成，创建一个a标签用于下载
          var a = document.createElement('a');
          a.download = that.wenname;
          a.href = e.target.result;
          a.setAttribute("id", "export")
          document.getElementById("purchaseManage").append(a); // 修复firefox中无法触发click
          a.click();
          document.getElementById("export").remove();
        }
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    dataURLtoBlob(dataurl) {
      var bstr = atob(dataurl);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "pdf" });
    },
    // 获取详情
    getDetail(id) {
      bhdetail({
        company_id: id,
      }).then((res) => {
        console.log(res);
        this.shenqingInfo = res.data.data.jiben;
        this.formLabelAlign = res.data.data.shenqing_company;
        this.shenqishenpiFilengInfo = res.data.data.ziliao;
        this.baohanFile = res.data.data.baohan;
        this.chjg = res.data.data.guarantee_company;
        this.payList = res.data.data.pay;
        this.kdList = res.data.data.kuaidi;
        this.applyno = res.data.data.jiben.apply_number
      });
    },
  },
};
</script>
<style scoped lang="scss">
.weidaili_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search {
  float: right;
  width: 20%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;

  ::v-deep.el-input__inner {
    border: none !important;
  }

  .el-button {
    border: none;
  }
}

::v-deep.el-input__inner {
  border: none !important;
}

.weidaili {
  height: 75vh;
  margin-bottom: 10px;
  overflow: hidden;
}

.block {
  width: 95%;
  padding-right: 5%;
  display: flex;
  justify-content: flex-end;
}

.showphoto {
  height: 553px;
  background: #f5f6fa;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.showphoto1 {
  height: 553px;
  background: #f5f6fa;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-tabs .el-tab-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // overflow-y: auto;
}

.app-container {
  //   height: calc(100vh + 50px);
  height: calc(100vh - 130px);
  padding-bottom: 0px;
  position: relative;
  // display: flex;
  // flex-direction: column;
  // position: relative;
}

// ::v-deep .el-tabs__content {
//   // height: 100% !important;
// }

.public-ku {
  margin-top: 1.375rem;
  width: 443.8px;
  height: 250px;
  margin-bottom: 1.25rem;
}

.kuang-txt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}

.pdf {
  width: 50px;
  height: 50px;
}

.kuang-1 {
  font-size: 1.1625rem;
  line-height: 2.3125rem;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #333333;
}

.fromsBox {
  width: 100%;
  overflow: auto;
  /* margin: 0px auto; */
  margin-top: 60px;
  padding: 0 15%;
  padding-bottom: 40px;

  .el-form-item {
    margin-bottom: 4px;
    margin-left: 20px;
  }
}

.title {
  font-weight: bold;
  margin-bottom: 10px;
}

.left {
  width: 70%;
  margin: 0px auto;
  margin-top: 60px;
}

.conter {
  margin-left: 20px;
  // width: 85%;
}

.backoff {
  position: absolute;
  z-index: 999;
  left: 222px;
  // top: 83px;
  // margin-left: 180px;
  display: flex;
  justify-content: flex-end;
  padding: 5px 0;
  box-sizing: border-box;

  div {
    width: calc(100vw - 240px);
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
  }

  .el-button {
    border: 1px solid;
  }
}

.rzBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%);

  .el-button {
    width: 150px !important;
  }
}

.renzhng {
  flex: 1;
  overflow-y: auto;
  padding: 0 10%;

  .el-form-item {
    margin-bottom: 4px;
  }
}

.footer {
  display: flex;
  padding-left: 10px;
  box-sizing: border-box;
  height: 45px;
  // justify-content: center;
  align-items: center;
  background-color: #f4f4f5 !important;

  .btn {
    width: 80px;
    height: 35px;
    border: 1px solid #1795ff;
  }
}

.table {
  margin-top: 50px;
}

.public-kuang {
  margin-top: 0.5rem;
  //   width: 750px;
  height: 85px;
  padding: 0.5125rem 0.55rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  //   flex-direction: column;
  /* justify-content: space-between; */
  /* align-items: center; */
  background: #ffffff;
  -webkit-box-shadow: 0rem 0rem 0.1875rem 0rem rgb(0 0 0 / 15%);
  box-shadow: 0rem 0rem 0.1875rem 0rem rgb(0 0 0 / 15%);
}

.kuang-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 800;
}

.kuang-1 {
  font-size: 1.1625rem;
  line-height: 2.3125rem;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  font-family: Microsoft YaHei;
  font-weight: 800;
  color: #333333;
}

.kuang-2 {
  width: 4.125rem;
  height: 2.0375rem;
  line-height: 1.375rem;
  text-align: center;
  /* border-radius: 20px; */
  background: #069cff;
  border: 0.0625rem solid #069cff;
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  padding: 0.3125rem 0.5125rem;
  color: #fff;
}

.tac {
  height: 100%;
}

::v-deep .tac .el-tabs__content {
  height: 100%;
  overflow-y: auto;
}
::v-deep .el-tabs--left .el-tabs__item.is-left {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align:end;
  font-size: 18px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #000000;
}

::v-deep .fromsBox .el-input__inner {
 width: 100% !important;
}
::v-deep .el-tabs--left .el-tabs__item.is-active {
  background: #1795ff;
  color: #fff;
}
::v-deep .el-tabs--left{
    height: 100%;
}
::v-deep .el-tabs__item{
font-size: 16px;
}
</style>
    